<template>
  <!--文件的回显和下载  lingyaxin -->
  <el-upload
    ref="fileupload"
    class="upload-demo"
    action="#"
    :on-preview="onUploadPreview"
    :file-list="fileList"
    :disabled="true"
  />
</template>

<script>
// 附件上传
import { fileDownLoad } from '@/api/file/file.js'
export default {
  name: 'ImageUpload',
  props: {
    // 附件上传的存放
    editFileList: {
      type: Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // 存放编辑 文件的集合
      fileList: []
    }
  },
  watch: {
    editFileList: function(val) {
      if (val !== undefined && val.length > 0) {
        this.fileList = JSON.parse(JSON.stringify(val))
      }
    }
  },
  methods: {
    // 上传的文件预览下载
    onUploadPreview(file) {
      // eslint-disable-next-line no-prototype-builtins
      var isRe = file.hasOwnProperty('response')
      var fileId
      var fileName
      if (isRe) {
        this.msgInfo('该文件应当先保存再下载')
      } else {
        fileId = file.fileId
        fileName = file.name
        fileDownLoad(fileId).then(res => {
          // 文件流下载
          this.downloadFileFlow(res, fileName)
        })
      }
    },
    // 清空上传的附件
    emptyFile() {
      var _this = this
      _this.fileList = []
      _this.fileIdsList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
</style>
